<template>
	<div class="brand">
		<div class="index-top layout pl30rem pr30rem">
			<i class="iconfont icon-zuo white" @click="$router.back(-1)" style="font-size:1.6rem" v-if="showApp !='1' && isiOS !='1' "></i>
			<div class="search-mask" @click="toSearch"></div>
			<search-bar class="flex_1"></search-bar>
		<!-- 	<div class="inform">
				<span class="hint">99+</span>
				<i class="iconfont icon-news"></i>
			</div> -->
		</div>
		<!-- <div class="brand-content layout-juscon" style="height:100%;">
			<ul class="left-list bg-f5">
				<li v-for="item in dataList" class="align-center pt15rem pb15rem w100 fs34rem c666" :class="{select : select_id == item.brand_id }" @click="loadInitData(item)">
					<img style="width:5rem;height:5rem;" :src="img_url + item.brand_pic" alt="">
					<p class="ellipsis">{{ item.brand_name }}</p>
				</li>
			</ul>
			<ul class="flex_1 right-content">
				<router-link tag="li" :to="'/detail/experience-detail/'+ item.goods_id" class="layout-juscon pt40rem pl30rem pr30rem" v-for="(item,index) in data" v-if="item.booking_type == 1 " :key="index">
					<img :src="img_url + item.pic_cover_mid" class="circle-8 mr30rem" alt="">
					<div class="content flex_1">
						<p class="c333 bold fs32rem ellipsis">{{ item.category_name }}</p>
						<div class="layout pt10rem pb10rem">
							<strong class="fs34rem cxo-red-color">{{ item.price }}</strong>
						</div>
						<del class="fs20rem c999">原价:{{ item.market_price }}元</del>
						<button v-if="item.booking_type == 1" class="mt10rem mb5rem white cxo-red circle-8 align-center pt15rem pb15rem">预约体验</button>
					</div>
				</router-link>
				<router-link tag="li" :to="'/ordering/detail/commodity-detail/'+ item.goods_id" class="layout-juscon pt40rem pl30rem pr30rem" v-for="(item,index) in data" v-if="item.booking_type == 2 " :key="index">
					<img :src="img_url + item.pic_cover_mid" class="circle-8 mr30rem" alt="">
					<div class="content flex_1">
						<p class="c333 bold fs32rem ellipsis">{{ item.category_name }}</p>
						<div class="layout pt10rem pb10rem">
							<strong class="fs34rem cxo-red-color">{{ item.price }}</strong>
						</div>
						<del class="fs20rem c999">原价:{{ item.market_price }}元</del>
						<button v-if="item.booking_type == 2" class="mt10rem mb5rem white cxo-red circle-8 align-center pt15rem pb15rem">预售中</button>
					</div>
				</router-link>
				<router-link tag="li" :to="'/mall/mall-detail/'+ item.goods_id" class="layout-juscon pt40rem pl30rem pr30rem" v-for="(item,index) in data" v-if="item.booking_type == 3 " :key="index">
					<img :src="img_url + item.pic_cover_mid" class="circle-8 mr30rem" alt="">
					<div class="content flex_1">
						<p class="c333 bold fs32rem ellipsis">{{ item.category_name }}</p>
						<div class="layout pt10rem pb10rem">
							<strong class="fs34rem cxo-red-color">{{ item.price }}</strong>
						</div>
						<del class="fs20rem c999">原价:{{ item.market_price }}元</del>
						<button v-if="item.booking_type == 3" class="mt10rem mb5rem white cxo-red circle-8 align-center pt15rem pb15rem">立即购买</button>
					</div>
				</router-link>
			</ul>
		</div> -->

		<section class="detail-nav">
			<scroll-navbar :channels="channels" key-name="brand_name" v-model="cateid" key-id='brand_id'></scroll-navbar>
		</section>
		<section class="index-banner" v-if="banner.length>0">
			<swiper :data="banner" img-key="adv_image" :options="Options">
			</swiper>
		</section>
		<ul class="pl30rem pr30rem pb40rem shop-list layout flex-w" v-infinite-scroll="loadData" infinite-scroll-disabled="loading" infinite-scroll-distance="10" v-if="flag">
			<li v-for="item in data" :key="item.nav_id" class="mt40rem" @click="jumpDetail(item)">
				<div style="position:relative" v-if="item.activity_cate == '4'">
			 		<img class="responsive-img" :src=" img_url + item.pic_cover_mid+ '?x-oss-process=image/resize,m_pad,h_220'"alt="">
					<p class="fs36rem circle pl10rem pr10rem pt5rem pb5rem white" style="position:absolute;left:5px; bottom:5px; background-color:#F8474E;opacity:.8;">拼</p>
		 		</div>
				<img class="responsive-img" v-lazy="img_url + item.pic_cover_mid+ '?x-oss-process=image/resize,m_pad,h_220'" alt="" v-else>
				<p class="mt20rem fs30rem c333 bold ellipsis mb10rem">{{ item.goods_name }}</p>
				<div class="flex mb10rem">
					<span class="white pt5rem pb5rem pr10rem pl10rem mr10rem bg-red fs20rem radius ellipsis" style="display:inline-block;" >{{ item.brand_name }}</span>
				</div>
				<!-- <div class="layout mt15rem mb30rem">
					<span class="fs24rem c666">限量{{ item.clicks }}份</span>
					<span class="fs24rem c666">已有{{ item.sales }}人预约</span>
				</div> -->
				<p v-if="item.activity_cate == '4'" class='layout'><strong class="mr5rem fs34rem red">￥{{ item.ping_price }}</strong> <del class="fs20rem c999">原价:{{ item.market_price }}元</del></p>
				<p v-else class='layout'><strong class="mr5rem fs30rem red">￥{{ item.price }}</strong> <del class="fs18rem c999">原价:{{ item.market_price }}元</del></p>
				
				<!-- <button class="mt25rem w100 pt20rem pb20rem bg-red white fs28rem bold" v-if="item.booking_type == '1'">预约体验</button> -->
				<button class="mt25rem w100 pt15rem pb15rem bg-red white bold">预售中</button>
				<!-- <button class="mt25rem w100 pt20rem pb20rem bg-red white fs28rem bold" v-if="item.booking_type == '3'">立即购买</button> -->
			</li>
		</ul>
		<template v-else>
			<default :imgUrl="img" explain='暂无商品'></default>
		</template>
	</div>
</template>

<script>
import { getBrandList,getBrand } from "@/api/ordering";
import { getCategory,getGoodsBanner} from "@/api/nav-detail";
import SearchBar from '@/components/Search-bar';
import Swiper from '@/components/Swiper';
import Default from "@/components/Default";
import ScrollNavbar from '@/components/Scroll-navbar';
import $toast from '@/utils/toast';	
import { Lazyload, InfiniteScroll } from 'mint-ui';
import Vue from "vue";
Vue.use(Lazyload);
	export default{
		components: {
			Swiper,
			SearchBar,
			Default,
			ScrollNavbar
		},
		directives:{
			InfiniteScroll
		},
		data()
		{
			return{
				img        : require('../../../assets/icon-goods2.png'),
				showApp    : window.sessionStorage.getItem('isapp'),
				isiOS      : this.$route.query.isapp,
				cateid     : parseInt(this.$route.params.id) == -6 ? 0 : -6 ,
				img_url    : process.env.IMG_URL,
				dataList   : [],
				data       : [],
				channels   : [],
				banner     : [],
				page_index : 1,
				select_id  : '',
				flag       : true,
				loading    : false,
				Options    : {
					slidesPerView :'auto',
					loopedSlides: 'auto',
					autoplay: {
						delay: 5000,
					},
					pagination: {
				    	el: '.swiper-pagination',
				    	bulletClass : 'my-red',
					},
				}
			}
		},
		watch:{
			cateid(newVal,oldVal)
			{
				this.initData();
				this.loadBanner();
			}
		},
		created()
		{
			this.loadNav();
			this.loadBanner();
		},
		methods:
		{
			loadData()
			{
				this.loading = true;
				let params = {
					brand_id   : this.cateid,
					page_index : this.page_index++,
					page_size  : 10
				}
				getBrandList(params).then(res => {
					if(res.data.length > 0 )
					{
						this.data = this.data.concat(res.data);
						this.loading = false;
					}
					else if (params.page_index > 1)
					{
						$toast('没有更多了');
					}
					else
					{
						this.flag = false;
					}
					if(res.data.length < params.page_size)
					{
						this.loading = true;
					}
				})
			},
			initData()
			{
				this.page_index = 1;
				this.data = [];
				this.flag = true;
				this.loadData();
			},

			toSearch()
			{
				this.$router.push('/search');
			},
			loadNav()
			{
				getBrand().then(res => {
					this.channels = res.data;
				})
			},
			loadBanner()
			{
				let params = {
					type   : 2,
					cateid : this.cateid
				}
				getGoodsBanner(params).then(res => {
					this.banner = res.data
				})
			},
			jumpDetail(item)
			{
				if(item.activity_cate == 4)
					this.$router.push('/ordering/detail/group-detail/' + item.goods_id)
				else
					this.$router.push('/ordering/detail/commodity-detail/' + item.goods_id)
			}
		}
	}
</script>

<style lang="less"> 
	.brand{
		height: 100%;	
		.index-top{
			height: 90/28rem;
			background: #ff0036;
			.inform{
				color: #fff;
				position:relative;
				.hint{
					background: #fff;
					color: #ff0036;
					font-size: 20/28rem;
					text-align:center;
					width: 50/28rem;
					height: 25/28rem;
					line-height: 25/28rem;
					position: absolute;
					top:-5/28rem;
					right: -15/28rem;
					border-radius: 15/28rem;
				}
				i{
					font-size: 60/28rem !important;
				}
			}
			.search-mask{
				height: 3.2rem;
				width: 68%;
				position: absolute;			
				left:19%;
				z-index:2;
			}
		}
		.index-banner{
			.swiper-container{
				.swiper-wrapper{
					height: 380/28rem;
					.swiper-slide {
						img{
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
				}
			}
		}
		.shop-list{
			overflow: hidden;
		    li{
		    	width: 48%;
		    	button{
		    		border-radius: 10/28rem;
		    	}
		    	.experience{
		    		border-radius: 5/28rem;
		    		background-color: #ffdee5;
		    		padding:2/28rem 5/28rem;
		    		vertical-align: top;
		    	}
		    	img{
		    		height: 360/28rem;
		    	}
		    }
		}
	}
</style>